<template>
    <view class="setcolorbg">
            <view class="title">请选择皮肤颜色</view>
             <radio-group @change="radioChange">
            <view class="list">
              
                    <view class="item" v-for="(item,index) in list" :key="index" >
                            <view class="name">{{item.name}}</view>
                            <view class="block" :style="{'background':'#'+item.color}"></view>
                            <radio :value="item.color" />
                 
                    </view>
                
                    
            </view>
             </radio-group> 
            <button class="submit" :disabled="!selectId" @tap="submitHandle">应用颜色</button>
    </view>
</template>
<script>


import {postBackgroundColor,postUpColor} from '@/request/actions'


export default {
       
       
        data(){
            return{
                 list:[ ],
                 selectId:'',
                 bStop:false,
                 salonId:''
            }
            
        },
        methods:{
            
            radioChange(e){
                   
                    this.selectId = e.detail.value;
            },
            submitHandle(){
                    let salonDetailedphotos = this.selectId;
                    let globalData = getApp().globalData;
                    let salonId = this.salonId;
                    if(this.bStop)return;
                    this.bStop = true;
                    postUpColor({salonDetailedphotos,salonId}).then(r=>{
                            let {data:res} = r;
                            this.bStop = false;
                            if(res.status == 200){
                                uni.showModal({
                                    content:'店铺皮肤设置成功',
                                    showCancel:false,
                                    success:res=>{
                                        uni.navigateBack();
                                    }
                                })
                            }

                    })
            }
        },
        onLoad(query){
            
            
            this.salonId = query.salonId
      

                postBackgroundColor().then(r=>{
                        let {data:res} =r;
                        if(res.status == 200){

                              
                             let _data = res.data[0];  

                             this.list = Object.keys(_data).map(key=>({
                                name:key,
                                color:_data[key],
                                ckecked:false
                            }))

                         
                           
                        }

                        
                })
        }
}
</script>
<style lang="scss">
.setcolorbg{
    min-height: 100vh;
    background: #f5f5f5;
    padding: 20rpx;
    box-sizing: border-box;
    .submit{
        height: 80rpx;
        border-radius: 40rpx;
        font-size: 35rpx;
        color:#fff;
        background: $my-main-color;
        padding: 0;
        border:none;
        &:after{
            border:0;
        }
        &[disabled]{
            background: #dedede;
        }
      
    }
    .list{
        margin-bottom: 200rpx;
    }
    .title{
        color:#333;
        font-size: 30rpx;
        margin-bottom: 30rpx;
    }
  
    .item{
        text-align: center;
        display: inline-block;
        width: 150rpx;
        margin: 0 43rpx 40rpx;
    
    }
    .name{
        color:#333;
        font-size: 24rpx;
        margin-bottom: 15rpx;
    }
    .block{
        width: 150rpx;
        height: 45rpx;
        border-radius: 6rpx;
        margin-bottom:15rpx;
    }
}
</style>